<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- 系统概览 -->
      <el-col :span="16">
        <el-card class="overview-card">
          <template #header>
            <div class="card-header">
              <span>系统概览</span>
              <el-button-group>
                <el-tooltip content="刷新数据" placement="top">
                  <el-button @click="fetchOverview">
                    <el-icon><Refresh /></el-icon>
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </div>
          </template>
          <el-row :gutter="20" class="overview-stats">
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-icon">
                  <el-icon><Collection /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-label">标签总数</div>
                  <div class="stat-value">{{ stats.totalTags }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-icon green">
                  <el-icon><Upload /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-label">上行规则数</div>
                  <div class="stat-value">{{ stats.upstreamRules }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-card">
                <div class="stat-icon orange">
                  <el-icon><Download /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-label">下行规则数</div>
                  <div class="stat-value">{{ stats.downstreamRules }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 最近添加的规则 -->
        <el-card class="recent-rules-card">
          <template #header>
            <div class="card-header">
              <span>最近添加的规则</span>
            </div>
          </template>
          <el-table :data="recentRules" style="width: 100%">
            <el-table-column prop="tagName" label="标签" width="120" />
            <el-table-column prop="metricName" label="指标名称" />
            <el-table-column prop="metricType" label="类型" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.metricType === 'UPSTREAM' ? 'success' : 'warning'" size="small">
                  {{ scope.row.metricType === 'UPSTREAM' ? '上行' : '下行' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="规则" width="180">
              <template #default="scope">
                {{ scope.row.metricName }} {{ scope.row.condition }} {{ scope.row.threshold }}
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="持续时间" width="100">
              <template #default="scope">
                {{ scope.row.duration }}秒
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 快速操作 & 使用说明 -->
      <el-col :span="8">
        <el-card class="quick-actions-card">
          <template #header>
            <div class="card-header">
              <span>快速操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="$router.push('/tags')">
              <el-icon><Plus /></el-icon>新增标签
            </el-button>
            <el-button type="success" @click="$router.push('/metrics')">
              <el-icon><Setting /></el-icon>配置规则
            </el-button>
          </div>
        </el-card>

        <el-card class="help-card">
          <template #header>
            <div class="card-header">
              <span>使用说明</span>
            </div>
          </template>
          <div class="help-content">
            <h4>功能介绍</h4>
            <ol>
              <li>
                <strong>标签管理：</strong>
                <p>创建和管理异常标签，用于分类和识别不同类型的异常。</p>
              </li>
              <li>
                <strong>规则配置：</strong>
                <p>为每个标签配置具体的判断规则，包括指标阈值和持续时间。</p>
              </li>
              <li>
                <strong>指标类型：</strong>
                <p>支持上行和下行两种类型的指标监控。</p>
              </li>
            </ol>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  Collection,
  Upload,
  Download,
  Plus,
  Setting,
  Refresh
} from '@element-plus/icons-vue'
import axios from 'axios'

const API_BASE_URL = 'http://localhost:8080/api'

interface Stats {
  totalTags: number
  upstreamRules: number
  downstreamRules: number
}

interface Rule {
  tagName: string
  metricName: string
  metricType: string
  condition: string
  threshold: number
  duration: number
}

const stats = ref<Stats>({
  totalTags: 0,
  upstreamRules: 0,
  downstreamRules: 0
})

const recentRules = ref<Rule[]>([])

const fetchOverview = async () => {
  try {
    const [tagsResponse, rulesResponse] = await Promise.all([
      axios.get(`${API_BASE_URL}/rtc/tags`),
      axios.get(`${API_BASE_URL}/rtc/rules/recent`)
    ])

    const tags = tagsResponse.data
    const rules = rulesResponse.data

    stats.value = {
      totalTags: tags.length,
      upstreamRules: rules.filter((r: Rule) => r.metricType === 'UPSTREAM').length,
      downstreamRules: rules.filter((r: Rule) => r.metricType === 'DOWNSTREAM').length
    }

    recentRules.value = rules.slice(0, 5) // 只显示最近5条规则
  } catch (error) {
    console.error('获取概览数据失败:', error)
  }
}

onMounted(() => {
  fetchOverview()
})
</script>

<style scoped>
.home {
  padding: 20px;
}

.overview-card,
.recent-rules-card,
.quick-actions-card,
.help-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-stats {
  margin-top: 20px;
}

.stat-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--el-color-primary-light-9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
}

.stat-icon.green {
  background: var(--el-color-success-light-9);
  color: var(--el-color-success);
}

.stat-icon.orange {
  background: var(--el-color-warning-light-9);
  color: var(--el-color-warning);
}

.stat-icon :deep(svg) {
  width: 24px;
  height: 24px;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-actions .el-button {
  width: 100%;
  justify-content: center;
}

.help-content {
  color: var(--el-text-color-regular);
}

.help-content h4 {
  margin: 0 0 16px;
  color: var(--el-text-color-primary);
}

.help-content ol {
  padding-left: 20px;
  margin: 0;
}

.help-content li {
  margin-bottom: 16px;
}

.help-content strong {
  color: var(--el-text-color-primary);
}

.help-content p {
  margin: 4px 0 0;
  font-size: 14px;
}
</style> 